<template>
    <div class="body newsdetail" v-if="JSON.stringify(nesInfo) != '{}'">
        <div class="j_zixun">
            <div class="j_posi_back"></div>

            <div class="j_zixun_box">
                <h1 class="j_dt_h1">
                    {{ nesInfo.news.title }}
                </h1>

                <h2 class="j_dt_h2">
                    <div>
                        <span>{{ nesInfo.news.cat_name }}</span
                        >： <i>{{ nesInfo.news.time }}</i>
                    </div>
                    <div
                        class="collectBtn"
                        v-if="nesInfo.collection != 0"
                        @click="changeCollect"
                    >
                        已收藏
                    </div>
                    <div
                        class="collectBtn"
                        v-if="nesInfo.collection == 0"
                        @click="changeCollect"
                    >
                        收藏资讯
                    </div>
                </h2>

                <img class="thumb" :src="nesInfo.news.thumb" alt="" />

                <div
                    class="j_content"
                    v-html="replaceText(nesInfo.news.content)"
                ></div>
            </div>
        </div>

        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    data() {
        return {
            nesInfo: {},
        };
    },
    computed: {},
    mounted() {
        this.getNewsdetail();
    },
    methods: {
        // 收藏相关
        changeCollect() {
            axiosPost(
                '/api/news/collect',
                {
                    article_id: this.$route.query.id,
                },
                (res) => {
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }

                    this.getNewsdetail();
                }
            );
        },
        // 获取详情
        getNewsdetail() {
            axiosPost(
                '/api/news/detail',
                {
                    news_id: this.$route.query.id,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.nesInfo = res.data;
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.newsdetail {
    .thumb {
        width: 14rem;
        margin: 0 auto;
        display: block;
    }
    .j_header {
        height: 2.56rem;
    }

    .content {
        background-color: rgba(0, 0, 0, 0);
        padding: 0.64rem 0;
    }

    header {
        height: auto;
    }

    .j_zu_detial {
        height: 1.28rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.8533rem;
    }

    .j_zu_detial h1 {
        height: 1.28rem;
        width: 1.28rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .j_zu_detial h1 img {
        width: 0.9387rem;
    }

    .j_zu_detial h3 {
        height: 1.28rem;
        width: 1.28rem;
        text-align: right;
        color: #fff;
        line-height: 0.8rem;
        font-size: 1rem;
    }

    .j_zu_detial h2 {
        font-size: 0.768rem;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: 1px;
    }

    /* 详情 */
    .j_zixun {
        position: relative;
        overflow: hidden;
    }

    .j_posi_back {
        height: 1.28rem;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
    .j_posi_back {
        background: #fe333d;
        height: 2.28rem;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .j_zixun_box {
        width: 15.1467rem;
        border-radius: 0.4267rem;
        margin: 0.4rem auto;
        padding: 0.64rem 0 0 0;
        background: #fff;
    }

    .j_dt_h1 {
        font-size: 0.96rem;
        font-weight: 500;
        color: #000000;
        line-height: 1.2373rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
        padding: 0 0.64rem;
    }

    .j_dt_h2 {
        height: 2.0267rem;
        border-bottom: 1px solid #dcdcdf;
        padding: 0 0.64rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .j_dt_h2 b {
        width: 1.1307rem;
        height: 1.1307rem;
        border-radius: 50%;
        overflow: hidden;
        display: inline-block;
    }

    .j_dt_h2 img {
        width: 100%;
    }

    .j_dt_h2 span,
    .j_dt_h2 i {
        font-size: 0.512rem;
        font-weight: 400;
        color: #888888;
    }

    .j_content {
        padding: 0.768rem;
        font-size: 0.768rem;
        font-weight: 400;
        color: #000000;
        line-height: 1.536rem;
    }

    /* 底部 */
    .jft_box {
        width: 15.1467rem;
        border-radius: 0.4267rem;
        margin: 0.64rem auto;
        background: #fff;
        height: 2.56rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .j_content_box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .j_content_box .sea-box {
        width: 10.7933rem;
        height: 1.28rem;
        background: #f6f6f7;
        position: relative;
        border-radius: 0.618667rem;
        overflow: hidden;
    }

    .j_content_box .sea-box span {
        background-image: url(/template/mobile/junzhengbao/static/images/search.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 0.768rem;
        width: 0.768rem;
        float: left;
        margin: 0.256rem 0;
        margin-left: 0.683rem;
    }

    .j_content_box .sea-box form {
        float: left;
    }

    .j_content_box .sea-box .sear-input {
        width: 8.712rem;
        margin-left: 0.256rem;
    }

    .j_content_box .sea-box input {
        border: none;
        outline: none;
        width: 100%;
        height: 1.28rem;
        color: #666;
        background: #f6f6f7;
        padding: 0 0.256rem;
        font-size: 0.5973rem;
        line-height: 1.28rem;
    }

    .j_btm_A {
        margin-left: 0.5973rem;
    }
}
</style>
